<template>
    <view>
        <view class="page">
            <view class="box" v-for="(item, index) in person" :key="index">
                <text class="text">{{ item.account }}</text>

                <text class="text">{{ item.phone }}</text>

                <view style="margin-top: 20px">
                    <text class="text">{{ item.address }}</text>
                </view>

                <view class="box1" onTap="xiugai">
                    <text class="text1">编辑</text>
                </view>

                <view class="divider"></view>
            </view>
        </view>
        <view class="disi">
            <ant-button type="primary" onTap="handleTap">添加地址</ant-button>
        </view>
    </view>
</template>

<script>	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    data() {
        return {
            person: [],
            // 数据数组
            account: '',
            address: '',
            addressid: 0,
            isdefault: 0,
            openID: '',
            phone: ''
        };
    },
    onLoad() {
        uni.getStorage({
            key: 'openId',
            success: (res) => {
                const openID = res.data; // 从存储中获取 openID
                console.log('饿哦地', res.data.openId);

                // 发起请求获取数据
                uni.request({
                    url: url + '/selectAllAddress',
                    // API 接口地址
                    method: 'GET',
                    data: {
                        openID: res.data.openId // 传递 openID
                    },
                    headers: {
                        'content-type': 'application/json' //默认值
                    },
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        this.setData({
                            person: res.data.data
                        });
                    }
                });
            }
        });
    },
    onShow() {
        this.loadData();
    },
    methods: {
        loadData() {
            // 从本地存储中获取 openID
            // my.getStorage({
            //   key: 'openId',
            //   success: (res) => {
            //     const openID = res.data.openId;  // 从存储中获取 openID
            //     console.log('Fetched openID:', openID);
            //     // 发起请求获取数据
            //     my.request({
            //       url: url + '/selectAllGopeople',  // API 接口地址
            //       method: 'POST',
            //       data: {
            //         openID: openID  // 传递 openID
            //       },
            //       headers: {
            //         'content-type': 'application/json',  // 默认值
            //       },
            //       dataType: 'json',
            //       success: (res) => {
            //         if (res.data && res.data.data) {
            //           const people = res.data.data;
            //           // 处理数据，转换为前端渲染的格式
            //           const personArray = people.map(person => ({
            //             name: person.peopleName,
            //             card: person.peopleCard
            //           }));
            //           // 更新数据
            //           this.setData({
            //             person: personArray
            //           });
            //           console.log('Data fetched and set:', this.person);
            //         }
            //       },
            //       fail: (error) => {
            //         console.error('Request failed:', JSON.stringify(error));
            //       },
            //       complete: () => {
            //         my.hideLoading();
            //       }
            //     });
            //   },
            //   fail: (error) => {
            //     console.error('Failed to get storage:', JSON.stringify(error));
            //   }
            // });
        },

        handleTap() {
            uni.navigateTo({
                url: '/pages/tianjiachuxingren/tianjiachuxingren'
            });
        },

        gobianji() {
            uni.navigateTo({
                url: '/pages/bianjichuxingren/bianjichuxingren'
            });
        },

        xiugai() {
            uni.navigateTo({
                url: '/pages/xiugaidizhi/xiugaidizhi'
            });
        }
    }
};
</script>
<style>
.page {
    display: flex;
    background-color: white;
    flex-direction: column;
    font-family: Arial, sans-serif;
    margin: 16px;
    padding: 8px;
    border-radius: 10px;
    color: white;
}

.left {
    float: left;
    width: 70%;
    margin-left: 8px;
}

.disan {
    height: 30px;
    width: 50px;
    margin-top: 20px;
    background-color: rgb(248, 250, 252);
    padding-right: 0px;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    float: right;
    margin-left: auto;
}
.disi {
    height: 100px;
    width: 90%;
    bottom: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    right: 10px;
}
.box {
    display: block;
    border-radius: 10px;
    margin-top: 10px;
}
.text {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 13px;
    color: #8a8a8a;
}
.box1 {
    border: #8a8a8a 1px solid;
    position: relative;
    width: 40px;
    height: 18px;
    border-radius: 8px;
    color: #8a8a8a;
    left: 280px;
    bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text1 {
    display: block;
}
.divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 16px 0;
    width: 100%;
}

</style>
